<script setup lang="ts">
import {ref,onMounted} from 'vue'
import type {DeptModel, DeptModelArray} from '@/api/model/model'
import {queryAllApi,addApi,queryInfoApi, updateApi, deleteApi} from '@/api/dept'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'

// 声明列表展示数据
const tableData = ref<DeptModelArray>([])

// 声明方法
const queryAll=async ()=>{
 const result=await queryAllApi();
 tableData.value=result.data;
}

// 钩子函数
onMounted(()=>{
  queryAll()
})

//-------------------------------  部门新增

const dialogFormVisible = ref(false)
const formTitle=ref<string>('')
const deptForm=ref<DeptModel>({name:''})

const add=()=>{
  console.log('add');
  dialogFormVisible.value=true
  formTitle.value='新增部门'
  deptForm.value={name:''}
}

const save=async(form:FormInstance | undefined)=>{
if(!form) return
form.validate(async(valid)=>{
  if(valid){
    // 通过表单校验
let result=null;
  if(deptForm.value.id){
    // 有ID 执行是更新操作
     result = await updateApi(deptForm.value)
  }else{
    // 没有ID 执行新增操作
     // 保存方法
   result =await addApi(deptForm.value)
  }
  if(result.code){
    // 提示信息 成功
    ElMessage.success('操作成功')
  }else{
    // 提示信息失败
     ElMessage.error(result.msg)
  }
  dialogFormVisible.value=false
  queryAll()
  }

})


}
//   -------------------------------------------部门修改
const update=async(id:number)=>{

  dialogFormVisible.value=true
  formTitle.value='修改部门'
  deptForm.value={name:''}

  const result =await queryInfoApi(id)
  deptForm.value = result.data
}
// ----------------------------------------------部门删除
const deleteById=async(id:number)=>{
  //弹出框确认
   ElMessageBox.confirm(
    '您真的要删除部门信息吗?',
    '确认删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
     // 调用接口 删除数据
     const result =await deleteApi(id)
     if(result.code){
      ElMessage.success('删除成功')
      queryAll()
     }else{
       ElMessage.error(result.msg)
     }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })


}
// ---------------表单校验
//定义表单校验规则
const deptFormRef = ref<FormInstance>()
const rules = ref<FormRules<DeptModel>>({
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度在2-10个字之间', trigger: 'blur' },
  ]
})

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
  <h1>部门管理</h1>
   <el-button type="primary" style="float:right" @click="add();resetForm(deptFormRef)">+新增</el-button>
<br>
<br>
 <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="name" label="部门名称" width="250" />
    <el-table-column prop="updateTime" label="操作时间" width="300" />

    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button  type="primary" size="small" @click="update(scope.row.id);resetForm(deptFormRef)">
          修改
        </el-button>
        <el-button  type="danger" size="small" @click="deleteById(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

   <!--  新增 修改 对话框 -->
     <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="deptForm"  ref="deptFormRef" :rules="rules">
      <el-form-item label="部门名称" label-width="150px" prop="name">
        <el-input v-model="deptForm.name" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false;resetForm(deptFormRef)">取消</el-button>
        <el-button type="primary" @click="save(deptFormRef)">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>

<style scoped>

</style>
